/** @type {import('tailwindcss').Config} */
import Form from '@tailwindcss/forms'
import Typography from '@tailwindcss/typography'

module.exports = {
  darkMode: ['class'],
  content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  safelist: [
    // Light mode
    ...['blue', 'green', 'yellow', 'red', 'purple', 'pink', 'indigo'].flatMap(
      (color) =>
        [100, 200, 300, 600, 700, 800].flatMap((shade) => [
          `bg-${color}-${shade}`,
          `border-${color}-${shade}`
        ])
    ),
    // Dark mode
    ...['blue', 'green', 'yellow', 'red', 'purple', 'pink', 'indigo'].flatMap(
      (color) =>
        [700, 800, 900, 950].flatMap((shade) => [
          `dark:bg-${color}-${shade}`,
          `dark:border-${color}-${shade}`
        ])
    ),
    // 通用类
    'dark:border-white/20',
    'border-black/10',
    'dark:text-gray-100',
    'text-gray-800'
  ],
  theme: {
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      '2xl': '1536px'
    },
    extend: {
      // 扩展 textShadow 配置
      textShadow: {
        englishDark:
          '0 0 8px rgba(255, 215, 0, 0.6), 0 0 16px rgba(184, 134, 11, 0.4)',
        englishLight:
          '0 0 8px rgba(235, 134, 25, 0.4), 0 0 16px rgba(235, 134, 25, 0.2)'
      },
      keyframes: {
        barrageScroll: {
          '0%': {
            transform: 'translateX(0)'
          },
          '100%': {
            transform: 'translateX(-100%)'
          }
        },
        l9: {
          to: {
            'background-position': 'calc(50% + 1.6em) 0, calc(50% + 3.2em) .8em'
          }
        },
        'cursor-fade-in': {
          '0%,50%': {
            opacity: '1'
          },
          '51%,100%': {
            opacity: '0'
          }
        },
        slideIn: {
          '0%': {
            transform: 'translateX(-100%)'
          },
          '100%': {
            transform: 'translateX(0)'
          }
        },
        slideInWithBounce: {
          '0%': {transform: 'translateX(-100%)'},
          '60%': {transform: 'translateX(10%)'}, // 超调 10%
          '100%': {transform: 'translateX(0)'}
        },
        slideOut: {
          '0%': {transform: 'translateX(0)'},
          '100%': {transform: 'translateX(-100%)'}
        },
        doorOpenLeft: {
          '0%': {transform: 'scaleX(0)'},
          '70%': {transform: 'scaleX(1)'},
          '100%': {transform: 'scaleX(1)'}
        },
        doorOpenRight: {
          '0%': {transform: 'scaleX(0)'},
          '70%': {transform: 'scaleX(1)'},
          '100%': {transform: 'scaleX(1)'}
        },
        fadeInUp: {
          '0%': {opacity: '0', transform: 'translateY(20px)'},
          '100%': {opacity: '1', transform: 'translateY(0)'}
        },
        'theme-transition': {
          '0%': {
            clipPath: 'circle(0% at 100% 100%)',
            opacity: 1
          },
          '100%': {
            clipPath: 'circle(150% at 100% 100%)',
            opacity: 1
          }
        },
        celebrate: {
          '0%': {transform: 'translate(0, 0) rotate(0deg)', opacity: '1'},
          '100%': {
            transform: ({angle, distance}) =>
              `translate(${Math.cos(angle) * distance}px, ${
                Math.sin(angle) * distance - 200
              }px) rotate(360deg)`,
            opacity: '0'
          }
        },
        sway: {
          '0%, 100%': {transform: 'translateX(0)'}, // 起始和结束位置
          '50%': {transform: 'translateX(20px)'} // 向右移动
        }
      },
      animation: {
        'cursor-fade-in': 'cursor-fade-in 1s infinite',
        slideIn: 'slideIn 0.5s ease-in-out',
        'slide-in-bounce': 'slideInWithBounce 1.5s ease-out',
        'slide-out': 'slideOut 0.5s ease-in',
        doorOpenLeft:
          'doorOpenLeft 1.2s cubic-bezier(0.65,0.05,0.36,1) forwards',
        doorOpenRight:
          'doorOpenRight 1.2s cubic-bezier(0.65,0.05,0.36,1) forwards',
        fadeInUp: 'fadeInUp 0.8s 0.8s ease-out forwards',
        'theme-transition':
          'theme-transition 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
        l9: 'l9 2s linear infinite',
        barrageScroll: 'barrageScroll 10s linear infinite',
        celebrate: 'celebrate ease-out forwards',
        sway: 'sway 1s ease-in-out infinite'
      },
      colors: {
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))'
        },
        typeText: {
          DEFAULT: 'hsl(var(--type-text))',
          foreground: 'hsl(var(--type-text-foreground))'
        },
        black: '#000',
        white: '#fff',
        gray: '#f0f3fa',
        // 小区域的背景颜色 例如: 输入框,按钮,小代码区域等
        smallLightArea: '#f4f4f5',
        smallDarkArea: '#383838',
        // 大区域的背景颜色 例如: 页面背景,卡片背景等
        bigDarkArea: '#242424',
        bigLightArea: '#f8f8f8',
        // 主题色
        themeColor: '#eb8619',
        // 主题字母色 , 没有发光效果
        themeEnglishLight: '#eb8619',
        themeEnglishDark: '#FFD700',
        // 选中色
        hoverColor: '#eb8619',
        // 英文字母颜色 带发光效果
        englishDark: '#FFD700',
        englishLight: '#eb8619',
        // 成功颜色
        success: '#00c06b',
        dark: '#000',
        'dark-second-black': '#4b4b4b',
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        textDisabled: 'hsl(var(--text-disabled))',
        card: {
          DEFAULT: 'hsl(var(--card))',
          foreground: 'hsl(var(--card-foreground))'
        },
        popover: {
          DEFAULT: 'hsl(var(--popover))',
          foreground: 'hsl(var(--popover-foreground))'
        },
        secondary: {
          DEFAULT: 'hsl(var(--secondary))',
          foreground: 'hsl(var(--secondary-foreground))'
        },
        muted: {
          DEFAULT: 'hsl(var(--muted))',
          foreground: 'hsl(var(--muted-foreground))'
        },
        accent: {
          DEFAULT: 'hsl(var(--accent))',
          foreground: 'hsl(var(--accent-foreground))'
        },
        destructive: {
          DEFAULT: 'hsl(var(--destructive))',
          foreground: 'hsl(var(--destructive-foreground))'
        },
        border: 'hsl(var(--border))',
        input: 'hsl(var(--input))',
        ring: 'hsl(var(--ring))',
        chart: {
          1: 'hsl(var(--chart-1))',
          2: 'hsl(var(--chart-2))',
          3: 'hsl(var(--chart-3))',
          4: 'hsl(var(--chart-4))',
          5: 'hsl(var(--chart-5))'
        }
      },
      borderRadius: {
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 2px)',
        sm: 'calc(var(--radius) - 4px)',
        '4xl': '2rem'
      },
      spacing: {
        128: '32rem',
        144: '36rem'
      },
      fontFamily: {
        code: ['Minecrafter', 'sans-serif'],
        sans: ['XS', 'Minecrafter', 'sans-serif']
      },
      plugins: [Form, Typography]
    }
  },
  plugins: [
    require('tailwindcss-animate') // 动画
  ]
}
